<template>
  <div>
    <city-header></city-header>
    <city-search
      :cities="cities"
    ></city-search>
    <city-list
      :cities="cities"
      :hotCities="hotCities"
      :letter="letter"
    ></city-list>
    <city-alphabet
      :cities="cities"
      @letterChange="handleLetterChange"
    ></city-alphabet>
  </div>
</template>

<script>
  import cityHeader from './components/city-header'
  import citySearch from './components/city-search'
  import cityList from './components/city-list'
  import cityAlphabet from './components/city-alphabet'
  import axios from 'axios'

  export default {
    name: "City",
    components: {
      cityHeader,
      citySearch,
      cityList,
      cityAlphabet
    },
    data() {
      return {
        cities: {},
        hotCities: [],
        letter: ''
      }
    },
    mounted() {
      axios.get('/api/city.json').then(
        this.getInfo
      )
    },
    methods: {
      getInfo(res) {
        let json = res.data;
        if (json.ret && json.data) {
          let data = json.data;
          this.cities = data.cities;
          this.hotCities = data.hotCities;
          console.log(this.cities, this.hotCities);
        }
      },
      handleLetterChange(letter) {
        this.letter = letter;
      }
    }
  }
</script>

<style scoped>

</style>
